<template>
  <div class="newsList">
    <div
      class="nav_news_box"
      :style="{ 'height': heights }"
    >
      <div
        class="nav_news_list"
        v-for="item in list"
        :key="item.id"
      >
        <div class="nav_news_id"></div>
        <div
          class="nav_news_item"
          @click="handDitails(item)"
        >
          {{item.title}}
        </div>
        <div
          v-show="item.sta==1"
          class="my_new"
        >[ 新 ]</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "newsList.vue",
  props: {
    heights: {
      type: String
    },
    list: {
      type: Array
    }
  },
  data() {
    return {
      newsList: []
    };
  },
  mounted() {
    console.log(this.heights);
  },
  methods: {
    handDitails(item) {
      console.log(item, "详情");
      this.$router.push({
        name: "news",
        query: {
          sortId: item.sortId,
          id: "2",
          title: item.aName,
          detailsID: item.id,
          avt: 0
        }
      });
    }
  }
};
</script>

<style lang='scss' scoped>
.newsList {
  height: 100%;
}
.nav_news_box {
  // height: 365px;
  height: 100%;
  width: 100%;
  padding: 16px;
  border: 1px solid rgba(204, 204, 204, 1);
  background: rgba(248, 248, 248, 1);
  .nav_news_list {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .nav_news_item:hover {
      color: #1792cf !important;
    }
    .nav_news_item {
      cursor: pointer;
      color: #333333;
      font-size: 16px;
      max-width: 363px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .my_new {
      color: #e6142f;
      font-size: 16px;
      margin-left: 26px;
    }
    .nav_news_id {
      width: 8px;
      height: 8px;
      background: rgba(28, 137, 224, 1);
      border-radius: 50%;
      margin-right: 4px;
    }
  }
}
</style>
